<template>
  <div>
    <img :src="qrCodeUrl" alt="QRCode" />
  </div>
</template>

<script setup>
import QRCode from "qrcode";

const props = defineProps({
  value: {
    type: String,
    required: false,
    default: () => ({}),
  },
  size: {
    type: Number,
    required: false,
    default: 200,
  },
  color: {
    type: String,
    required: false,
    default: "#000000",
  },
});
const qrCodeUrl = ref("");
watch(
  () => props.value,
  async () => {
    const text = props.value; // 要生成二维码的文本
    try {
      const dataUrl = await QRCode.toDataURL(text, {
        errorCorrectionLevel: "H",
        width: "100%",
        "color.dark": props.color,
      });
      qrCodeUrl.value = dataUrl;
    } catch (error) {
      console.error("Failed to generate QR Code", error);
    }
  },
  { deep: true }
);
onMounted(async () => {
  const text = props.value; // 要生成二维码的文本
  try {
    const dataUrl = await QRCode.toDataURL(text, {
      errorCorrectionLevel: "H",
      width: "100%",
      "color.dark": props.color,
    });
    qrCodeUrl.value = dataUrl;
  } catch (error) {
    console.error("Failed to generate QR Code", error);
  }
});
</script>
